<template>
  <!-- 自定义弹窗 -->
  <transition name="fade">
    <view v-if="showDialog" class="popup">
      <view class="popup-content">
        <view class="contract-title">平台合同</view>
        <view class="contract-tips">*请先预览完合同，才能同意协议!</view>
        <view class="contract-terms">
          <scroll-view class="contract-terms" :scroll-y="true" @scrolltolower="scrolltolower" :style="{ maxHeight: '570px' }">
            <text style="font-size: 16px" v-html="contractTerms"></text>
            <!-- <rich-text style="font-size: 16px">{{ contractTerms }}</rich-text> -->
          </scroll-view>
        </view>
        <view class="button-group">
          <!-- <button type="default" style="background-color: #eee !important" @click="closePopup">关闭</button> -->
          <button v-if="!isAgree" type="primary" @click="agree" :style="{ width: '100%', 'background-color': !previewCompleted ? '#60a9f9' : '#007aff' }">同意协议继续注册</button>
          <button v-else type="primary" @click="closePopup" :style="{ width: '100%', 'background-color': '#007aff' }">关闭弹窗</button>
        </view>
      </view>
    </view>
  </transition>
</template>

<script>
export default {
  name: 'registerContract',
  props: {
    showDialog: Boolean,
    contract: Boolean
  },
  data() {
    return {
      previewCompleted: false,
      isAgree: false,
      contractTerms:
        '<p class="MsoNormal" align="center" style="text-align: center; line-height: 20pt;"><br></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">第一条</font>&nbsp;<font face="微软雅黑">前言</font></span></b></p><p class="MsoNormal" style="text-indent: 24pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">根据《</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">中华人民共和国民法典</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">》</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; letter-spacing: 0pt; font-size: 10.5pt;">《中华人民共和国合同法》</span><span style="font-family: 微软雅黑; letter-spacing: 0pt; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">《中华人民共和国城市房地产管理法》</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、《</span><span style="font-family: 微软雅黑; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">广东省城镇房屋租赁条例</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">》、《东莞市关于加快培育和发展住房租赁市场的实施意见》</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">等</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">有关</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">法律法规文件</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">的规定</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">甲方和乙方本着</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">自愿、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">平等</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">公平</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">诚实信用的原则</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">经协商一致</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">在甲方（天选之址平台，以下简称平台或本平台）上</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">达成如下</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">业务合作</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">协议。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">乙方已认真阅读并全面查看本合同及所有附件内容，且对</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附件</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">一</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">《平台规则》、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">件二《看房协议</font>&nbsp;<font face="微软雅黑">》、</font></span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">件三《平台客户跟踪报备制度》、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">件四《分佣规则》、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">件五《多方租赁合同》等所有内容全面理解并表示认同，没有任何异议，最后予以签字确认，并享有、承担对应的法律权利、责任和义务。</span></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;"><br></span></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">第二条</font>&nbsp;<font face="微软雅黑">合作标的</font></span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">乙方使用甲方天选之址（包括但不限于小程序、公众号、</font><font face="微软雅黑">APP、PC端网站）网络平台前台及后台的各类房源信息，包括但不限于</font></span><span style="font-family: 微软雅黑; font-size: 10.5pt;">生产</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">办公、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">商业办公</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、仓库、商铺、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">公寓</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、综合等</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">使用</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">类型</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><span style="font-family: 微软雅黑; font-size: 10.5pt; text-indent: 21pt;">&nbsp;</span></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt; text-indent: 21pt;"><br></span></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">第三条</font>&nbsp;<font face="微软雅黑">合作</font></span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">期限</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="text-indent: 24pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">双方</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">期限为</span><u><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;</span></u><u><span style="font-family: 微软雅黑; font-size: 10.5pt;">一年</span></u><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">合同期内</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">如双方其中一方需调整合作内容，应提前一个月协商处理</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">合同期满后，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">如</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">甲</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">乙双</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">方</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">无异议，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">合同自动续约。</span></p><p class="MsoNormal" style="text-indent: 24pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;"><br></span></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">第四条</font>&nbsp;<font face="微软雅黑">合作</font></span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">方式</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">甲方已</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">收集、整理、上传（包括但不限于</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">生产办公</font>&nbsp;</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">商业办公</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">仓库</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">商铺</font>&nbsp;</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">公寓</font>&nbsp;</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">综合</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">等）各类型房源信息至甲方注册管理的</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">互联网平台，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">乙方</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">输入租客需求信息，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">通过该平台精准搜索匹配查看房源，服务租客实现成交。</span></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;"><br></span></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">第五条</font>&nbsp;&nbsp;<font face="微软雅黑">佣金</font></span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">1.佣金。</span></b><span style="font-family: 微软雅黑; font-size: 10.5pt;">指乙方通过甲方平台帮助客户租用物业后，乙方收到的劳务费用。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">2.</span></b><span style="font-family: 微软雅黑; font-size: 10.5pt;">如甲方平台展示的物业通过乙方成功租赁，佣金由</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">甲方转支付或房东转账给乙方，佣金额为</span><u><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;<font face="微软雅黑">具体为平台网上房源对应的</font></span></u><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;<font face="微软雅黑">标的佣金。</font></span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">3.为切实保护中介各方权益，乙方认同甲方的看房委托书、平台报备制度、分佣规则等制度</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">（附件</font>&nbsp;<font face="微软雅黑">平台分佣规则及</font></span><span style="font-family: 微软雅黑; font-size: 10.5pt;">跟进</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">报备规则）</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。如对分佣结果有争议，乙方可提供在平台有详细记录的等公认的信息，包括不限于报备内容、看房委托书等。</span></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;"><br></span></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">第六条</font>&nbsp;&nbsp;<font face="微软雅黑">端口服务费</font></span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">端口服务费指乙方支付给甲方平台的网络保障和后台信息获取成本、固定维护费。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">端口服务费为</span><u><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;&nbsp;</span></u><font face="微软雅黑"><u>以平台当前收费说明为准</u></font><span style="font-size: 10.5pt; text-indent: 21pt; font-family: 微软雅黑;"><u>&nbsp;&nbsp;</u></span><u><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;&nbsp;</span></u><span style="font-family: 微软雅黑; font-size: 10.5pt;">元。</span><span style="font-family: 微软雅黑; font-size: 10.5pt; text-indent: 21pt;">&nbsp;</span></p><p class="MsoNormal" style="text-indent: 21pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt; text-indent: 21pt;"><br></span></p><p class="MsoNormal" style="margin-left: 0pt; text-indent: 0pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-weight: bold; font-size: 10.5pt;">第七条&nbsp;</span><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">财务结算</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="word-break: break-all; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">1.甲乙方与租户、房东线上或线下多方签约物业租赁合同，租户将租金、履约保证金等款项支付给甲方平台或房东。甲方或房东按照合约规定，在租户支付金额到账后的</span><u><span style="font-family: 微软雅黑; font-size: 10.5pt;">三</span></u><span style="font-family: 微软雅黑; font-size: 10.5pt;">个工作日内进行分账结算，支付给参与交易的乙方佣金</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="word-break: break-all; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">2.乙方开具对佣金的收款凭证给房东，如乙方不能开具房东需要的发票，须扣除税点。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="word-break: break-all; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;</span><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="margin-left: 0pt; text-indent: 0pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-weight: bold; font-size: 10.5pt;">第八条&nbsp;</span><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">双方权利义务和责任</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">1.&nbsp;</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">乙方可以拥有</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">一个</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">管理</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">账户，拥有对子管理员权限，可以授权并管理对下属分账号的应用权限。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">2.&nbsp;</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">乙方主账号、授权子账号经授权</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">可浏览</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">平台公开的所有房源信息，包括后台隐藏的佣金报价等，可上传、查看、管理填写的客户跟进报备表</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="margin-bottom: 12pt; margin-left: 0pt; text-indent: 0pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">3.&nbsp;</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">乙方</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">可以转发</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">甲方的</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">房源页面信息（链接）到微信</font>&nbsp;<font face="微软雅黑">QQ 钉钉&nbsp;</font></span><span style="font-family: 微软雅黑; font-size: 10.5pt;">抖音</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">等社交</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">软件，以获取客户资源</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">4.</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">乙方承诺</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">诚实守信，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">信息保密，遵守平台交易规则，包括不限于平台规则</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附件</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">一</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">《平台规则》、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">件二《看房协议</font>&nbsp;<font face="微软雅黑">》、</font></span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">件三《平台客户报备制度》、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">件四《分佣规则》、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">附</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">件五《多方租赁合同》</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">等制度规则，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">通过甲方平台开发或浏览搜索信息、已纳入报备制度</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">的客户</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">（</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">包括该客户之亲属</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">授权人</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">代理人</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">、</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">所在单位、合作伙伴等</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">）</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">严禁乙方绕过平台直接与房东或其他中介等签约交易的撬客、跳单行为，如有发生则乙方按照该物业标的</span><u><span style="font-family: 微软雅黑; font-size: 10.5pt;">0.5个月</span></u><span style="font-family: 微软雅黑; font-size: 10.5pt;">月租金赔付给甲方。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">5.</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">甲方视合作程度将线上客户资源按区域分发给乙方跟进，甲方对乙方采取评分机制，对考核时段两星及以下客户评分的乙方，甲方将取消乙方一个月及以上享受接收甲方客户资源的资格，对服务质量严重恶劣者，甲方将取消乙方的全面合作并列为合作黑名单。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">6.甲方维护房源信息的丰富、完整、多样化，在平台上及时更新房源信息，增强平台影响力，赋能乙方服务合适的承租方，自觉维护双方合作的信息保密。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;</span></p><p class="MsoNormal" style="margin-left: 0pt; text-indent: 0pt; line-height: 20pt;"><span style="font-family: 微软雅黑; font-weight: bold; font-size: 10.5pt;">第九条&nbsp;</span><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">合同解除</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">1.&nbsp;</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">在合同有效期内</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">经双方当事人协商一致</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">可以解除本合同</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">2.</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">因不可抗力导致本合同无法继续履行的</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">本合同自行解除。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;</span></b></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">第</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">十一</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">条</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;<font face="微软雅黑">争议解决方法</font></span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">1.&nbsp;</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">本合同在履行过程中发生的争议</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">由</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">双方当事人</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">协商解决</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">；</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">协商不成的</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">应当</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">通过</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">提交</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">东莞</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">仲裁委员会</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">申请</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">裁决。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="word-break: break-all; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">2.</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">合同有关争议解决的条款独立存在，合同的变更、解除、终止、无效或者被撤销均不影响其效力。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">&nbsp;</span></b></p><p class="MsoNormal" style="line-height: 20pt;"><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">第</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;">十二</span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><font face="微软雅黑">条</font>&nbsp;&nbsp;<font face="微软雅黑">合同生效</font></span></b><b><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></b></p><p class="MsoNormal" style="word-break: break-all; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">1.</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">本合同自双方签署</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">后立即生效并启动合作</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="word-break: break-all; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">2.</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">本合同生效后，</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">如</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">双方对合同内容的变更或补充应签订补充协议，补充协议与本合同具有同等的法律效力。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="word-break: break-all; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">3.</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">本合同附件</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">为本合同的有效组成部分，与本合同具有同等法律效力。</span><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="word-break: break-all; line-height: 20pt;"><span style="font-family: 微软雅黑; font-size: 10.5pt;">4.其他约定事项</span><span style="font-family: 微软雅黑; font-size: 10.5pt;">。</span><u><span style="font-family: 微软雅黑; font-size: 10.5pt;"><o:p></o:p></span></u></p><p class="MsoNormal" style="line-height: 20pt;"><br></p>'
    }
  },
  mounted() {
    console.log('showDialog:', this.showDialog)
  },
  watch: {
    showDialog(newVal) {
      console.log('showDialog updated:', newVal)
      if (newVal && this.contract) {
        this.isAgree = true
      }
    },
    contract(newVal) {
      if (!newVal) {
        this.previewCompleted = false
      }
    }
  },
  methods: {
    scrolltolower(e) {
      if (e) {
        this.previewCompleted = true
      }
    },
    closePopup() {
      this.$emit('closePopup')
    },
    // handleScroll(event) {
    //   console.log('++++', event)
    //   const scrollHeight = event.target.scrollHeight
    //   const scrollTop = event.target.scrollTop
    //   const clientHeight = event.target.clientHeight

    //   this.previewCompleted = scrollHeight - scrollTop <= clientHeight
    // },
    agree() {
      if (!this.previewCompleted) {
        uni.showToast({
          title: '请先预览完合同条款',
          icon: 'none'
        })
        return
      }
      this.$emit('agree')
    }
  }
}
</script>

<style scoped>
/* 动画效果 */
.fade-enter {
  opacity: 0;
  transform: translateY(20px); /* 初始位置 */
}
.fade-enter-to {
  opacity: 1;
  transform: translateY(0); /* 结束位置 */
}
.fade-enter-active {
  transition: opacity 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

.fade-leave {
  opacity: 1;
  transform: translateY(0); /* 当前状态 */
}
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px); /* 离开时的位置 */
}
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}
.contract-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
.contract-tips {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-content {
  position: fixed;
  bottom: 0;
  background: #f1f1f1;
  padding: 20px 10px;
  border-radius: 8px 8px 0 0;
  width: 100%; /* 弹窗宽度 */
  min-height: 80%; /* 最大高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contract-terms {
  padding: 0 2px;
  background-color: #f8f8f8 !important;
  overflow-y: auto; /* 允许滚动 */
}
.button-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
button {
  padding: 10px 40px !important;
}
</style>
